<script>
  import { onMount } from "svelte";
  import bg from "./assets/bg.jpg";
  import Chart from "./lib/Chart.svelte";
  import Setting from "./lib/Setting.svelte";
  // import Chart from "./lib/Chart.svelte";
  let chart, settingPanel;
  function redraw(config) {
    chart && chart.draw(config);
  }
  onMount(() => {
    settingPanel.draw();
  });
</script>

<main>
  <div class="car-sale-data-2022 drawer" style={`background-image: url(${bg})`}>
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
    <Chart bind:this={chart} />
    <Setting bind:this={settingPanel} on:redraw={redraw} />
  </div>
</main>

<style>
  .car-sale-data-2022 {
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
